<template>
  <view class="container">
    <view class="title" v-if="list.length != 0">可用优惠券</view>
    <view class="list">
      <view class="listitem" v-for="(item, index) in list" :key="item.id">
        <view class="left">
          <view style="font-weight: bold; font-size: 40rpx; color: #af825b; margin-bottom: 4rpx">
            {{ item.status_name == '满减金额劵' ? '减' + item.coupon_price + '元' : item.coupon_price + '折' }}
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #af825b">满{{ item.man_price }}课时</view>
        </view>
        <view style="width: 0; height: 150rpx; border-left: 4rpx dotted #e9d1bc"></view>
        <view class="right">
          <view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #af825b">{{ item.status_name }}</view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #af825b; margin-top: 24rpx">
              {{ item.start_time + '——' + item.end_time }}
            </view>
          </view>
        </view>
        <label class="radio" style="margin-left: 66rpx">
          <radio value="checked" :checked="item.isUse" @click="changestatus(item)" color="#3A57E9" style="transform: scale(0.7)" />
        </label>
      </view>
    </view>
    <view class="title" style="" v-if="list2.length != 0">不可用优惠券</view>
    <view class="list">
      <view class="listitem" style="background-color: #f8f8f8" v-for="(item, index) in list2" :key="item.id">
        <view class="left">
          <view style="font-weight: bold; font-size: 40rpx; color: #999999; margin-bottom: 4rpx">{{ item.coupon_price }}折</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #999999">满{{ item.man_price }}课时</view>
        </view>
        <view style="width: 0; height: 150rpx; border-left: 4rpx dotted #e9d1bc"></view>
        <view class="right">
          <view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #999999">{{ item.status_name }}</view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #999999; margin-top: 24rpx">
              {{ item.start_time + '——' + item.end_time }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btnuse" @click="fnuse">使用</view>
  </view>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      status: true, // 选择优惠卷是否符合条件
      list: [], // 可用优惠卷
      list2: [], // 不可用优惠卷列表
      checked: false,
      page: 1,
      yhjid: [] // 优惠卷的id
    };
  },
  methods: {
    // 使用优惠卷
    fnuse() {
      if (this.status) {
        uni.redirectTo({
          url: '/parents/skyuyue/skyuyue?yhjid=' + JSON.stringify(this.yhjid)
        });
      }
    },
    // 选择优惠卷
    changestatus(item) {
      item.isUse = !item.isUse;
      this.yhjid = [];
      this.list.forEach((item) => {
        if (item.isUse) {
          this.yhjid.push(item);
        }
      });
      if (this.yhjid.length > 2) {
        this.status = false;
        return uni.showToast({
          title: '每种类型的优惠卷只能选一张',
          icon: 'none'
        });
      } else if (this.yhjid.length == 2) {
        const arr = this.list.filter((item) => {
          return item.id == this.yhjid[0].id || item.id == this.yhjid[1].id;
        });
        if (arr[0].status_name == arr[1].status_name) {
          this.status = false;
          return uni.showToast({
            title: '每种类型的优惠卷只能选一张',
            icon: 'none'
          });
        }
      } else {
        this.status = true;
      }
    },
    // 获取优惠券
    async getlist(id, moeny) {
      const res = await uni.$http.post('/coupon/listCoupon', {
        page: this.page,
        period_id: id,
        money: moeny
      });
      console.log('获取可用的优惠卷', res);
      this.list = res.data.data.list.filter((item) => {
        return item.use_for == 1;
      });
      console.log('可用优惠卷', this.list);
      this.list.forEach((item) => {
        Vue.set(item, 'isUse', false);
      });
      this.list2 = res.data.data.list.filter((item) => {
        return item.use_for == 4;
      });
      console.log('不可用优惠卷', this.list2);
    }
  },
  onLoad(e) {
    console.log('课时id', e);
    // 获取可用优惠卷
    this.getlist(e.id, e.money);
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  .btnuse {
    position: fixed;
    box-sizing: border-box;
    bottom: 60rpx;
    width: 690rpx;
    height: 90rpx;
    background-color: #3553e8;
    color: #fff;
    border-radius: 100rpx;
    text-align: center;
    line-height: 90rpx;
  }
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #222222;
    margin-bottom: 20rpx;
  }
  .list {
    .listitem {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 690rpx;
      height: 202rpx;
      background-color: #fcf8f4;
      margin-bottom: 20rpx;
      .left {
        box-sizing: border-box;
        margin: 0 54rpx;
        text-align: center;
      }
      .right {
        text-align: center;
        margin-left: 30rpx;
      }
    }
  }
}
</style>
